<template>
  <div class="box">
    <div class="attachment">
      <!-- <el-table :data="fujianList" style="width: 100%">
        <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
        <el-table-column prop="fileName" label="文件名"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="btn_see(scope.row.fileName,scope.row.filePath)">查看</el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <div class="fujianBox" v-if="fujianList.length!=0">
        <div class="bgFujian" v-for="(item,index) in fujianList" :key="index">
            <div class="fujianTitle">{{(index+1)}}.{{item.fileName.substring(0,item.fileName.indexOf('.pdf'))?item.fileName.substring(0,item.fileName.indexOf('.pdf')):item.fileName}}</div>
            <div class="fujianContent">
                <div class="fujianName">
                  <i class="el-icon-document icon"></i>

                  <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top-start">
                    <p class="fujianNamePdf">{{item.fileName}}</p>
                  </el-tooltip>
                </div>
                <div class="isHover">
                  <span @click="btn_see(item,index)">查看</span>
                  <span @click="btn_download(item,index)">下载</span>
                </div>
            </div>
          </div>
        
      </div>
      <div v-else class="noData">
        暂无数据
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
        <span v-show="loadIfram==1" class="iframeLoad">
          加载中
          <div class="el-icon-loading"></div>
        </span>
        <iframe
          id="wode"
          v-show="loadIfram==2"
          frameborder="0"
          name="showHere"
          width="100%"
          height="600"
          scrolling="auto"
          :src="$https+filePath"
        ></iframe>
    </el-dialog>
    
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import {queryProjectResultAuditInfo} from "@/api/jjgc";
export default {
  components: {
    xTable
  },
  data() {
    return {
      tableData2: [
        { type: "招标文件" },
        { type: "采购文件" },
        { type: "抽取公告" },
        { type: "中标通知书" },
        { type: "中选/标通知书" },
        { type: "抽取公告" },
        { type: "项目合同" }
      ],
      currentPage4: 4,
      title: "",
      dialogVisible: false,
      fujianList:[],
      filePath: "",
      loadIfram: 1,
    };
  },
  created(){
    this.getFujian()
  },
  methods: {
    btn_download(item, index) {
      var a = document.createElement("a");
      a.setAttribute("href", this.$https + "/pc/file/download?id=" + item.id);
      a.click();
    },
    getFujian() {
      var data = {
        projectId: localStorage.getItem("projectId")
      };
      queryProjectResultAuditInfo(data).then(res => {
        console.log(res);
        this.fujianList = res.data.projectAccessoryList;
      });
    },
    btn_see(item, index) {
      let that = this;
      that.dialogVisible = true;
      that.title = item.fileName;
      that.filePath = item.filePath;

      that.$nextTick(() => {
        var iframe = document.getElementById("wode");
        iframe.onload = function() {
          console.log("加载完成");
          that.loadIfram = 2;
        };
      });
    }
  }
};
</script>

<style lang="scss">
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 30px;
  .attachment {
    background: #fff;
    padding: 20px;
    .page_class {
      margin-top: 20px;
      text-align: center;
    }
  }
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.bgFujian{
   padding-bottom: 10px;
   margin-bottom:20px; 
}
.fujianTitle{
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding:10px 20px;
  border-radius: 5px;
}
.fujianContent{
  margin-left: 30px;
  background: #F5F8FA;
  width: 350px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.fujianName{
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  align-items: center;
 width: 210px;
}
.fujianName .fujianNamePdf {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.fujianName .icon {
  display: block;
  font-size: 20px;
  margin-right: 10px;
   color: #409EFF;
}

.isHover{
  color: #409EFF;
  font-size: 13px;
  display: none;
  margin-left:20px; 
}
.isHover span{
  padding:0px 3px;
  margin-right: 5px;
  cursor: pointer;
}
.fujianContent:hover .isHover{
  display: block
}
.noData{
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #606266;
  padding: 20px;
}
</style>
